<template>
  <el-button v-if="props.isButton === true" type="primary" @click="show">{{ props.title }}</el-button>
  <el-input v-if="props.isButton === false" :style="{width: '200px'}" readonly v-model="data.inputText" :placeholder="props.title">
    <template #prepend>
      <el-button icon="Search" size="small" @click="show"></el-button>
    </template>
  </el-input>

  <!-- 工序搜索对话框 -->
  <el-dialog :title="props.title" v-model="data.open" width="950px" append-to-body>
    <el-form :model="data.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="数据查询" prop="dictLabel">
        <el-input v-model="data.queryParams.name" placeholder="请输入工序名称" clearable style="width: 200px"
                  @keyup.enter="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-table v-loading="data.loading" highlight-current-row @select="select1"  ref="refTable"
                :data="data.processList"  height="260px">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="工序名称" align="center" prop="name" />
        <el-table-column label="工艺类别" align="center" prop="treeId" />
        <el-table-column label="工艺要求" align="center" prop="attention" />
        <el-table-column label="是否启用" align="center" prop="enableFlag">
          <template #default="scope">
            <dict-tag :options="sys_is" :value="scope.row.enableFlag"/>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="创建者" align="center" prop="createBy" width="80"/>
        <el-table-column label="创建时间" align="center" prop="createTime" width="140">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新者" align="center" prop="updateBy" width="80" />
        <el-table-column label="更新时间" align="center" prop="updateTime" width="140">
          <template #default="scope">
            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="data.total>0"
          :total="data.total"
          v-model:page="data.queryParams.pageNum"
          v-model:limit="data.queryParams.pageSize"
          @pagination="getList"
      />
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSelectd">确 定</el-button>
        <el-button @click="data.open = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>



</template>

<script setup name="ProcessSearch">
import { listProcess } from "@/api/wms/process";
import {getCurrentInstance, reactive} from "vue";
const { proxy } = getCurrentInstance();
//字典数据模块的导入
const {sys_is} = proxy.useDict('sys_is');

const data = reactive({
  loading: true,
  processList: [],
  open: false,
  total: 0,
  inputText: null,
  reParams: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    enableFlag: 0,
    name: undefined,
  },
})

const props = defineProps({
  // 字典名称
  title: {
    type: String,
    default: "工序类别"
  },
  // 是否单选
  isSingle: {
    type: Boolean,
    default: true
  },
  isButton: {
    type: Boolean,
    default: false
  },
  // 数据参数
  process: {
    type: Object,
    default: null
  },
   inputText: {
    type: String,
    default: null,
  },
});

// 显示弹框
function show() {
  debugger
  // data.queryParams = props.process;
  data.queryParams = { ...data.queryParams }
  getList();
  data.open = true;
}

/** 搜索按钮操作 */
function handleQuery() {
  data.queryParams.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 选择操作 */
function select1(selection,row){
  if (props.isSingle) {
    proxy.$refs["refTable"].clearSelection();
  }
  proxy.$refs["refTable"].toggleRowSelection(row,true);
}

/** 查询工序列表 */
function getList() {
  data.loading = true;
  listProcess(data.queryParams).then(response => {
    console.log(response)
    data.processList = response.data
    data.total = response.total;
    data.loading = false;
  });
}

/** 选择操作 */
function handleSelectd() {
  data.reParams = proxy.$refs["refTable"].getSelectionRows();
  if (data.reParams.length == 0) {
    proxy.$modal.msgError("请选择数据，至少一行!!");
    return;
  }
  // 测试一下
  let tempdictValue = data.reParams.map(item => item.name);
  console.log(tempdictValue);
  // inputText = reParams.map(item => item.name);
  data.reParams.forEach(function (item) {
    data.inputText = item.name;
    console.log(data.inputText);
  });
  data.open = false;
  emit("selectd", data.reParams);
}

//数据变化页面需要变化
watch(() => props.inputText, val => {
  data.inputText = val;
}, { deep: true, immediate: true });

defineExpose({show,});
const emit = defineEmits(["selectd","inputText"]);
</script>
